<template>
  <a-modal
    title="新增"
    :width="800"
    :maskClosable="false"
    v-model="visible"
    @ok="handleOk"
  >

    <a-form :form="form">

      <a-form-item
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        label="父类目id"
      >
        <a-input
          placeholder="父类目id"
          v-decorator="[
            'parentId',
            {initialValue: record.parentId, rules: [{ required: true, message: '请输入父类目id' }]}
          ]"
          disabled="disabled" />
      </a-form-item>

      <a-form-item
        label="类目名"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-decorator="[
            'name',
            {initialValue: record.name, rules: [{ required: true, message: '请输入类目名' }]}
          ]"
          placeholder="给类目起个名字" />
      </a-form-item>

      <a-form-item
        label="叶子"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
      >
        <a-radio-group
          v-decorator="[
            'leaf',
            {initialValue: record.leaf},
          ]"
        >
          <a-radio :value="true">是</a-radio>
          <a-radio :value="false">否</a-radio>
        </a-radio-group>
      </a-form-item>

      <a-form-item
        label="层级"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }">
        <a-input
          v-decorator="[
            'level',
            {initialValue: record.level, rules: [{ required: true }]}
          ]"
          disabled="disabled"
        />
      </a-form-item>

      <a-form-item
        label="序号"
        :labelCol="{lg: {span: 7}, sm: {span: 7}}"
        :wrapperCol="{lg: {span: 10}, sm: {span: 17} }"
        :required="false"
      >
        <a-input-number
          :min="0"
          :max="10000"
          v-decorator="[
            'orderNum',
            {initialValue: record.orderNum},
          ]"
        />
      </a-form-item>

    </a-form>

  </a-modal>

</template>
<script>
import { categorySave, categoryUpdate } from '@/api/product'

export default {
  name: 'CateroyModal',
  data () {
    return {
      visible: false,
      record: {},
      defaultExpandAll: true,
      checkedKeys: [],
      form: this.$form.createForm(this),
      resourceTreeData: []
    }
  },
  methods: {
    handleEdit (record) {
      this.form.resetFields()
      console.log(record)
      this.record = Object.assign({}, record)
      this.visible = true
    },
    handleCreate (record) {
      this.form.resetFields()
      this.record = record
      this.visible = true
    },
    handleOk () {
      const _this = this
      this.form.validateFields((err, values) => {
        if (!err) {
          const params = { ...values }
          params.id = this.record.id
          console.log(params)
          if (!params.id) {
            categorySave(params).then(res => {
              _this.$message.success('保存成功')
              _this.visible = false
              _this.$emit('ok')
            })
          } else {
            categoryUpdate(params).then(res => {
              _this.$message.success('修改成功')
              _this.visible = false
              _this.$emit('ok')
            })
          }
        }
      })
    }
  },
  created () {}
}
</script>
